<template>
	<view class="box">
		<view class="banner">
		  <image src="../../static/licang2.png" mode="widthFix"></image>
		</view>
    <!-- 分类导航区域 -->
    <view class="nav-list">
      <view class="nav-image" @click="fillinto">
       <image src="../../static/tianbao.png" mode=""></image>
      <text> 信息填报</text>
      </view>
	 
    </view>
	
	
  <!-- 资讯区域 -->
  <view class="zixun">
    <view class="zixun-title">
     <text class="zixun-text">最新资讯</text>
	
	  <navigator open-type="switchTab" url="../news/news" class="zixun-nav">
		  查看全部
	   <text class="iconfont iconright">  </text></navigator>
    </view>
    <view class="newzixun">
      
      <uni-list>
      		<!-- title、note设置标题和小文字 -->
      		<uni-list-item direction="row" v-for="item in info" :key="item.id" :title="item.title" :note="item.user_name + ' '+item.last_modify_date">
      			<!-- 通过v-slot:header插槽定义列表左侧的图片显示，其他内容通过List组件内置属性实现-->
      			<template v-slot:header>
      				<!-- 当前判断长度只为简单判断类型，实际业务中，根据逻辑直接渲染即可 -->
      				<image class="image-1" :src="item.images" mode="aspectFill"></image>
      			</template>
      		</uni-list-item>
      	</uni-list>
        
    </view>
  </view>
    
	</view>
</template>

<script>
	export default {
		data() {
			return {
       // 轮播图数据列表
	   swiperList: [],
			 info: [{
			 						"user_name": "120次阅读",
			 						"title": "山东妇幼保健院儿童保健科--语言特色门诊开课了",
			 						// "avatar": "https://img.36krcdn.com/20200410/v2_9c3331af67e64994aa97a27fffb1a380_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
                 images: '../../static/zixun1.png',
			 						"last_modify_date": "2021-043-25 17:11:09",
			 					},
			 					{
			 						"user_name": "1300次阅读",
			 						"title": "宝妈给孩子的一份礼物-新生儿疾病筛查",
			 						// "avatar": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
                   images: '../../static/zixun2.png',
			 						"last_modify_date": "2021-02-15 17:03:18",
			 					}, {
			 						"user_name": "300次阅读",
			 						"title": "产妇失眠会影响哺乳",
			 						// "avatar": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
                   images: '../../static/zixun3.png',
			 						"last_modify_date": "2021-02-11 16:11:11",
			 					}
			 				]
			};
		},
    onLoad() {
       // this.getNavList() 
	   // 调用方法，获取轮播图数据
	   this.getSwiperList()
    },
    methods: {
   // 重置 loadmore
          resetLoadMore() {
              this.$refs["list"].resetLoadmore();
      },
       fillinto : function(e) {
      			uni.navigateTo({
      				url:"../fill/fill"
      			})
      		},
			
			async getSwiperList() {
				const { data:res} = await uni.get('/api/public/v1/home/swiperdata')
				// 请求失败
				if (res.meta.status !== 200) {
					return uni.showToast({
						title:: '数据请求失败',
						duration: 1500,
						icon: 'none'
					})
				}
			}
		
	},
  }
</script>

<style lang="less">
 @import "../../static/iconfont/iconfont.css";
 .box {
   display: flex;
  flex-direction: column;
 
 }
 .banner {
   display: flex;
  width: 100%;
  height: 150rpx;
  background-color: #ffffff;
  margin-bottom: 15%;
 }
 .banner image {
   width: 100%;
 }
 uni-image>div, uni-image>img {
     width: 100%;
     height: 77%;
 }

 .nav-list {
   display: flex;
   justify-content: space-around;
   margin: 30px 20px;
   padding-bottom: 50rpx;
   // border: 1px solid #aaaa7f;
   border-radius: 50rpx;
  }
 .nav-image {
   margin-top: 2%;
   margin-left: -65%;
   width: 150rpx;
   height: 100rpx;
   font-size: 35rpx;
 }
 .nav-image image {
   width: 80%;
   height: 110%;
 }
 // .nav-text {
 //   flex: 1;
 //   padding-top: 20%;
 //   padding-left: -100rpx;
 // }
 .zixun {
  margin-bottom: 20rpx;
 }
 .zixun-title {
  display: flex;
  justify-content: space-between;
  margin: 20rpx auto;
 }
 .zixun-text {
   font-size:34rpx ;
   font-weight: 600;
   padding-left: 10rpx;
 }
 .zixun-nav {
   font-size:24rpx ;
   font-weight: 300;
   padding-right: 20rpx;
 }
 .iconfont {
   font-size: 15px;
   margin-left: 10rpx;
   margin-top: 80rpx;
 }
 .content {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 	}
 
 	.image-1 {
 		flex-shrink: 0;
 		margin-right: 10px;
 		width: 125px;
 		height: 75px;
 		border-radius: 6px;
 		overflow: hidden;
 		border: 1px #f5f5f5 solid;
 	}
</style>
